<template>
    <div>
        <router-link tag="div" to="/" class="header-abs" v-show="showAbs"> 
            <div class="iconfont header-abs-back">&#xe600;</div>
        </router-link>
        <div class="header-fixed" v-show="!showAbs" :style="opacityStyle">
            <router-link to="/">
                <div class="iconfont header-fixed-back">&#xe600;</div>
            </router-link>
            景点详细
        </div>
    </div>
</template>
<script>

export default {
    name: 'DetailHeader',
    data () {
        return {
            showAbs: true,
            opacityStyle: {
                opacity: 0
            }
        }
    },
    methods: {
        handlerScroll() {
            console.log(111111)
            const top=document.documentElement.scrollTop
            //头部要是超过60，就会显示title
            if(top >60) {
                let opacity = top /140 
                opacity = opacity >1 ? 1 : opacity
                this.opacityStyle = { opacity }
                this.showAbs = false
            }else {
                this.showAbs = true
            }
        }
    },
    activated () {
        //监听方法
        window.addEventListener('scroll',this.handlerScroll)
    },
    //页面即将隐藏或者关闭
    deactivated () {
        //关闭监听器,否则对全局页面影响
         window.removeEventListener('scroll',this.handlerScroll)
    }
}    
</script>
<style lang="stylus" scoped>
    @import  '~styles/varibles.styl'
    .header-abs
        position: absolute
        left: .2rem 
        right: .2rem 
        top: .2rem 
        width: .8rem 
        height: .8rem 
        line-height: .8rem
        border-radius: .4rem 
        background: rgba(0,0,0,.8)
        text-align: center
        .header-abs-back
            color: #fff
            font-size: .4rem 
    .header-fixed
        z-index: 2
        position: fixed
        top: 0
        left: 0
        right: 0
        height: $headerHeight 
        overflow: hidden
        line-height: $headerHeight
        color: #fff
        background: $bgColor
        text-align: center 
        font-size: .32rem 
        .header-fixed-back
            //绝对定位
            position: absolute
            top: 0
            left: 0
            width: .64rem 
            text-align: center 
            font-size: .4rem
            color: #fff
</style>